<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box1{
      width: 100px;
      height: 100px;
      border: 1px black solid;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box1 div{
      width: 30%;
      height: 30%;
      background: black;
      border-radius: 50%;
      /*margin: auto;*/
    }

    #box2{
      width: 100px;
      height: 100px;
      border: 1px black solid;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      /*align-items: center;*/
    }
    #box2 div{
      width: 30%;
      height: 30%;
      background: black;
      border-radius: 50%;
      /*margin: auto;*/
    }
    #box2 div:last-child{
      align-self: flex-end;
    }

    #box3{
      width: 100px;
      height: 100px;
      border: 1px black solid;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #box3 div{
      width: 30%;
      height: 30%;
      background: black;
      border-radius: 50%;
      /*margin: auto;*/
    }
    #box3 div:first-child{
      align-self: flex-start;
    }
    #box3 div:last-child{
      align-self: flex-end;
    }

  </style>
</head>
<body>
<div id="box1">
  <div></div>
</div>
<div id="box2">
  <div></div>
  <div></div>
</div>
<div id="box3">
  <div></div>
  <div></div>
  <div></div>
</div>


</body>
</html>